<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>"/>
<link rel="stylesheet" type="text/css" href="webuploader/css/webuploader.css" />
<link rel="stylesheet" type="text/css" href="webuploader/examples/image-upload/style.css" />
<script src="js/jquery-3.2.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/praise.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>qqZone</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script>
	var commentover = function(obj){
		obj.style.backgroundColor = '#F7F7F7';
		obj.getElementsByTagName('span')[1].style.display='block';
	}
	var commentout = function(obj){
		obj.style.backgroundColor = '#fff';
		
		obj.getElementsByTagName('span')[1].style.display='none';
	}
	var showT = function(i,fatherId){
		alert(fatherId);
		if(fatherId){
			
			document.getElementById('fatherId'+i).value=fatherId;
		}
		
        
		
		
		document.getElementById('img'+i).style.display = 'none';
		document.getElementById('topic'+i).style.display = 'block';	
	}
	var showI = function(i){
		document.getElementById('img'+i).style.display = 'block';
		document.getElementById('topic'+i).style.display = 'none';
	}
</script>
</head>
<body>
	${login.userName}你好，<a href="#">注销</a>
	
	<!--  发动态  -->
	<div id="top">
		<form action="topic/addTopic.do" id="topicForm">
		<font style="color:#668FB8;font-size:12px; font-family:'微软雅黑';">有什么新鲜事想告诉大家?</font>
    	<div id="wrapper" style="width:100%; margin:16px 0px  16px; resize:none;" id="container" name="content" type="text/plain" ">
        <div id="container">
        <input id="photo" type="hidden" name="imgs">
            <!--头部，相册选择和格式选择-->
            <div id="uploader">
                <div class="statusBar" style="display:none;">
                    <div class="btns">
                        <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                    </div>
                </div>
                <div class="queueList">
                    <div id="dndArea" class="placeholder">
                        <div id="filePicker"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="webuploader/examples/image-upload/jquery.js"></script>
    <script type="text/javascript" src="webuploader/dist/webuploader.js"></script>
    <script type="text/javascript" src="webuploader/examples/image-upload/upload.js"></script>
    <br />
                
    <!-- 加载编辑器的容器 -->
	<script style="border:1px solid #dddddd;width:100%; margin:16px 0px  16px; resize:none;" id="container" name="content" type="text/plain" style="width:630px; margin:0px auto; border-radious:0px;">
	分享你开心的一刻！！！    
	</script>
	<!-- 配置文件 -->
	<script type="text/javascript" src="uedit/ueditor.config.js"></script>
	<!-- 编辑器源码文件 -->
	<script type="text/javascript" src="uedit/ueditor.all.js"></script>
	<!-- 实例化编辑器 -->
	<script type="text/javascript">
		var ue = UE.getEditor('container',{
            //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
            toolbars:[['emotion']],
            //focus时自动清空初始化时的内容
            autoClearinitialContent:true,
            //关闭字数统计
            wordCount:false,
            //关闭elementPath
            elementPathEnabled:false,
            //默认的编辑区域高度
            initialFrameHeight:100,
            //更多其他参数，请参考ueditor.config.js中的配置项
        })
        
        function sendMsg(){
			//javascript:document.getElementById('topicForm').submit();
			//action="topic/addTopic.do" id="topicForm"
			var topicContext = ue.getContent()
			 filenames =$('#photo').val()
			alert(filenames+'..........')
			$.ajax({
				url:'topic/addTopic.do',
				data: {topicContext:topicContext,imgs:filenames},
				success:function(){
					location.reload();
				}
			});
		}

	</script>
        
        
        
        
        <br />
        
        <a  href="javascript:sendMsg()" style="display:inline-block; border-radius:4px; background-color:#FF8140;color:#fff; width:80px;height:28px; line-height:28px; text-align:center; font-size:14px;float:right; text-decoration:none;"> 发 表 </a>
        <div class="clearbox"></div>
        </form>
    </div>
    <c:forEach items="${topicList}" var="topic" varStatus="index">
		<div class="topic">
	        <img src="imgs/${topic.user.photo}" style="width:60px;height:60px;"/>
	        <div class="right_content">
	            <p><a href="#">${topic.user.userName}：</a>${topic.topicContext}</p>
	            <div class="_imgs">
	            	<c:forTokens items="${topic.imgs}" var="img" delims="|">
	            	<img src="upload/${img}" style="width:158px; height:200px;"/>
	            	</c:forTokens>
	                <img src="imgs/img1.png" style="width:158px; height:200px;"/>
	            </div>
	            <div>
	                <span class="time">
	               <fmt:formatDate value="${topic.time}" pattern="yyyy-MM-dd HH:mm"/>
	                </span>
	            </div>
	            <!-- 点赞功能 -->
		        <c:forEach items="${prasies }" var="prasie">
	            	<c:if test="${prasie.topic.topicId eq topic.topicId }">
		            	 <div class="praise"  style="height: 20px;width: 20px;">
							<span name="praise"><img style="height: 20px;width: 20px;" src="imgs/yizan.png"/></span>
							<span>1455</span>
							<span id="add-num"><em>+1</em></span>
							<input name="userId" type="hidden" value="${login.userId}">
							<input name='topicId' type="hidden" value="${topic.topicId}">
						</div>
	            	</c:if>     	
	            </c:forEach>
	           
	             
	            
	            <!-- 回复开始 -->
	            <div class="comments_main" >
	               
					<c:forEach items="${topic.comments }" var="comment">
		                <div class="comment" onmouseover="commentover(this)" onmouseout="commentout(this)">
		                    <img src="imgs/${comment.user.photo}" style="width:30px;height:30px; float:left;"/>
		                    <div class="comment_content">
		                        <p><a href="#">${comment.user.userName}</a><c:if test="${not empty comment.father}">回复<a href="#">${comment.father.user.userName}</a></c:if>：${comment.commentContext} </p>
		                        <div style="position:relative;">
		                            <span class="time">${comment.time}</span>
		                            <span style=" position:absolute; top:0px; left:360px; display:none;" name="replay">
		                            	<a href="javascript:showT(${index.index},'${comment.commentId}')">回复</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">赞</a>
		                            </span>
		                        </div>
		                    </div>
		                </div>
					</c:forEach>
	               
	            </div>
	            <!-- 回复列表结束 -->
	            <img src="imgs/comments_btn.png" id="img${index.index}" onclick="showT(${index.index})"/>
	            <div id="topic${index.index}" style=" display:none;">
	                <form action="comment/addcomment.do" id="commentForm${index.index}">
	                	<input type="hidden" name="topic.topicId" value="${topic.topicId}"/>
		                <input type="hidden" name="user.userId" value="${login.userId}"/>
		                <input type="hidden" name="father.commentId" id="fatherId${index.index}"/>
		                <textarea style=" width:440px; height:120px; resize:none; border:1px solid #dddddd;" onblur="setTimeout(function() {showI(${index.index})},300)" name="commentContext"></textarea><br />
		                <a href="javascript:document.getElementById('commentForm${index.index}').submit();">回复</a>
	                </form>
	            </div>
	        </div>
	    </div>
	</c:forEach>
	
		<!--动态点赞结束-->
	<script>
	
		//$(function(){alert(1)})
		
		$(function(){
			$("span[name='praise']").click(function(){
				var praise_img = $(this).children('img');
				var text_box = $(this).parent().children(':eq(2)');
				var praise_txt = $(this).parent().children(':eq(1)');
				var userId = $(this).parent().children(':eq(3)').val();
				var topicId = $(this).parent().children(':eq(4)').val();
				console.log(userId+'........'+topicId)
				var num=parseInt(praise_txt.text());
				if(praise_img.attr("src") == ("imgs/yizan.png")){
					$.ajax(
								{
									url:"topic/ajaxpraise.do?name=yizan&topicId="+topicId+"&userId="+userId,
									type:"post",
									function(){
										
									}
								}
							);
					$(this).html("<img style='height: 20px;width: 20px;' src='imgs/zan.png' class='animation' />");
					praise_txt.removeClass("hover");
					text_box.show().html("<em class='add-animation'>-1</em>");
					$(".add-animation").removeClass("hover");
					num -=1;
					praise_txt.text(num)
				}else{
					$.ajax(
							{
								url:"topic/ajaxpraise.do?name=zan&topicId="+topicId+"&userId="+userId,
								type:"post",
								function(){
									
								}
							}
						);
					$(this).html("<img style='height: 20px;width: 20px;' src='imgs/yizan.png' class='animation' />");
					praise_txt.addClass("hover");
					text_box.show().html("<em class='add-animation'>+1</em>");
					$(".add-animation").addClass("hover");
					num +=1;
					praise_txt.text(num)
				}
			});
		})
		
	</script>
    


</body>
</html>